<template>
  <div class="user-table">
    <!-- 搜索框区域 -->
    <div class="search-container">
      <el-input v-model="searchId" placeholder="请输入房间id" @keyup.enter="filterData"></el-input>
      <el-input v-model="searchNumber" placeholder="请输入房间号" @keyup.enter="filterData"></el-input>
      <el-select v-model="searchType" placeholder="请选择房间类型" @change="filterData">
        <el-option label="单人房" value="1"></el-option>
        <el-option label="双人房" value="2"></el-option>
        <el-option label="三人房" value="3"></el-option>
        <el-option label="大床房" value="4"></el-option>
        <el-option label="豪华套房" value="5"></el-option>
      </el-select>
      <el-select v-model="searchState" placeholder="请选择房间状态" @change="filterData">
        <el-option label="空闲" value="0"></el-option>
        <el-option label="已入住" value="1"></el-option>
      </el-select>
      <el-input v-model="searchMaxPeople" placeholder="请输入最大容纳人数" @keyup.enter="filterData"></el-input>
      <el-input v-model="searchIntroduce" placeholder="请输入客房简介" @keyup.enter="filterData"></el-input>
      <el-button size="mini" @click="filterData">搜索</el-button>
    </div>
    <!-- 表格 -->
    <el-table :data="paginatedData" stripe style="width: 100%">
      <el-table-column prop="id" label="房间id"></el-table-column>
      <el-table-column prop="number" label="房间号"></el-table-column>
      <el-table-column prop="type" label="房间类型"></el-table-column>
      <el-table-column prop="state" label="房间状态"></el-table-column>
      <el-table-column prop="maxPeople" label="最大容纳人数"></el-table-column>
      <el-table-column prop="introduce" label="客房简介"></el-table-column>
      <el-table-column label="操作" width="140" fixed="right">
        <template slot-scope="scope">
          <el-button
            type="danger"
            @click="deleteRoom(scope.row.id)"
            style="font-size: 18px;">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 15]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="filteredData.length">
    </el-pagination>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [],
        searchId: '',
        searchNumber: '',
        searchType: '',
        searchState: '',
        searchMaxPeople: '',
        searchIntroduce: '',
        filteredData: [],
        currentPage: 1,
        pageSize: 10
      };
    },
    computed: {
      paginatedData() {
        const start = (this.currentPage - 1) * this.pageSize;
        const end = start + this.pageSize;
        return this.filteredData.slice(start, end);
      }
    },
    methods: {
      deleteRoom(roomId) {
        // 删除房间
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.axios
              .post(`http://localhost:9151/admin/deleteRoom?roomId=${roomId}`)
              .then((res) => {
                this.$message({
                  type: "success",
                  message: "删除成功"
                });
                this.listRooms();
              })
              .catch((res) => {
                this.$message({
                  type: "error",
                  message: "删除失败"
                });
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      },
      listRooms() {
        this.axios
          .get("http://localhost:9151/admin/listRooms")
          .then((res) => {
            this.tableData = res.data.data;
            for (let i = 0; i < this.tableData.length; ++i) {
              // 房间状态
              if (this.tableData[i].state === 0) {
                this.tableData[i].state = "空闲";
              } else if (this.tableData[i].state === 1) {
                this.tableData[i].state = "已入住";
              }
              // 房间类型
              switch (this.tableData[i].type) {
                case 1:
                  this.tableData[i].type = "单人房";
                  break;
                case 2:
                  this.tableData[i].type = "双人房";
                  break;
                case 3:
                  this.tableData[i].type = "三人房";
                  break;
                case 4:
                  this.tableData[i].type = "大床房";
                  break;
                case 5:
                  this.tableData[i].type = "豪华套房";
                  break;
              }
            }
            this.filterData();
          })
          .catch((res) => {
            console.log("err: " + res);
          });
      },
      filterData() {
        this.filteredData = this.tableData.filter(item => {
          const idMatch = this.searchId === '' || item.id.toString().includes(this.searchId);
          const numberMatch = this.searchNumber === '' || item.number.includes(this.searchNumber);
          const typeMatch = this.searchType === '' || item.type.toString() === this.searchType;
          const stateMatch = this.searchState === '' || item.state.toString() === this.searchState;
          const maxPeopleMatch = this.searchMaxPeople === '' || item.maxPeople.toString().includes(this.searchMaxPeople);
          const introduceMatch = this.searchIntroduce === '' || item.introduce.includes(this.searchIntroduce);
          return idMatch && numberMatch && typeMatch && stateMatch && maxPeopleMatch && introduceMatch;
        });
        this.currentPage = 1;
      },
      handleSizeChange(newSize) {
        this.pageSize = newSize;
      },
      handleCurrentChange(newPage) {
        this.currentPage = newPage;
      }
    },
    mounted() {
      this.listRooms();
    }
  };
</script>

<style scoped>
  .user-table {
    margin: 2rem;
  }

  .search-container {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
  }

  .el-input,
  .el-select,
  .el-button {
    min-width: 120px;
  }
</style>
